<!DOCTYPE html>
<html>
<head>
    <title>Stream Chat Demo</title>
    <style>
        /* 盒模型统一 [1,4](@ref) */
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        /* 聊天容器样式优化 [1,7](@ref) */
        .chat-container {
            width: 100%;
            max-width: 600px;
            height: 90vh;
            margin: 20px auto;
            border: 1px solid #ddd;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        /* 消息显示区域滚动优化 [3,9](@ref) */
        .chat-box {
            height: calc(100% - 120px);
            padding: 15px;
            overflow-y: auto;
            background: #f8f9fa;
            scroll-behavior: smooth;
        }

        /* 消息气泡样式增强 [5,8](@ref) */
        .message {
            margin: 12px 0;
            padding: 12px 16px;
            border-radius: 18px;
            max-width: 85%;
            word-break: break-word;
            position: relative;
            transition: opacity 0.3s;
        }

        .user-message {
            background: #0099ff;
            color: white;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }

        .bot-message {
            background: white;
            border: 1px solid #e0e0e0;
            margin-right: auto;
            border-bottom-left-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }

        /* 输入区域修复关键样式 [1,4,7](@ref) */
        .input-area {
            height: 80px;
            padding: 15px;
            border-top: 1px solid #eee;
            background: white;
            display: flex;
            gap: 12px;
            align-items: center;
        }

        #messageInput {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 25px;
            font-size: 15px;
            transition: border-color 0.3s;
        }

        #messageInput:focus {
            outline: none;
            border-color: #0099ff;
            box-shadow: 0 0 0 2px rgba(0,153,255,0.1);
        }

        #sendBtn {
            padding: 12px 24px;
            background: #0099ff;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 15px;
            transition: background 0.3s;
            min-width: 80px;
        }

        #sendBtn:hover {
            background: #007acc;
        }

        /* 加载状态提示动画 [5,8](@ref) */
        .typing-indicator {
            display: none;
            color: #666;
            padding: 10px 20px;
            font-style: italic;
            background: rgba(255,255,255,0.9);
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            animation: typing-pulse 1.5s infinite;
        }

        @keyframes typing-pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }

        /* 自定义滚动条 [7](@ref) */
        .chat-box::-webkit-scrollbar {
            width: 6px;
        }
        .chat-box::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .chat-box::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- 结构保持不变，优化类名 -->
    <div class="chat-container">
        <div class="chat-box" id="chatBox"></div>
        <div class="typing-indicator" id="typing">AI正在输入...</div>
        <div class="input-area">
            <input type="text" id="messageInput" placeholder="输入消息...">
            <button id="sendBtn">发送</button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            let isWaitingResponse = false;
            let currentResponse = '';
            let $lastBotMessage = null;

            function sendMessage() {
                const message = $('#messageInput').val().trim();
                if (!message || isWaitingResponse) return;

                appendMessage(message, 'user');
                $('#messageInput').val('');
                isWaitingResponse = true;
                $('#typing').show().css('display', 'inline-block');

                const eventSource = new EventSource(
                    `http://localhost:8080/ollama/chat-client/stream/chat?message=${encodeURIComponent(message)}`
                );

                eventSource.onmessage = (event) => {
                    const data = event.data;
                    
                    if (data.includes('[complete]')) {
                        eventSource.close();
                        isWaitingResponse = false;
                        $('#typing').hide();
                        currentResponse = '';
                        $lastBotMessage = null;
                    } else {
                        currentResponse += data;
                        updateBotMessage(currentResponse);
                    }
                };

                eventSource.onerror = () => {
                    $('#typing').hide();
                    isWaitingResponse = false;
                    eventSource.close();
                };
            }

            function appendMessage(content, type) {
                const messageClass = type === 'user' ? 'user-message' : 'bot-message';
                const $message = $('<div>').addClass(`message ${messageClass}`).text(content);
                $('#chatBox').append($message);
                scrollToBottom();
            }

            function updateBotMessage(content) {
                if (!$lastBotMessage) {
                    $lastBotMessage = $('<div>').addClass('message bot-message');
                    $('#chatBox').append($lastBotMessage);
                }
                $lastBotMessage.text(content);
                scrollToBottom();
            }

            function scrollToBottom() {
                const chatBox = document.getElementById('chatBox');
                chatBox.scrollTop = chatBox.scrollHeight + 50;
            }

            // 事件绑定优化
            $('#sendBtn').click(() => {
                if (!isWaitingResponse) sendMessage();
            });
            
            $('#messageInput').keypress(function(e) {
                if (e.which === 13 && !e.shiftKey) {
                    e.preventDefault();
                    if (!isWaitingResponse) sendMessage();
                }
            });
        });
    </script>
</body>
</html>